
<%@page import="com.liferay.portal.service.UserLocalServiceUtil"%>
<%@page import="com.hellodoctor.slayer.model.Profile"%>
<%@page import="com.hellodoctor.slayer.service.ProfileLocalServiceUtil"%>
<%@ include file="/html/common/init.jsp" %>

<!-- <script src="http://cdn.alloyui.com/3.0.0/aui/aui-min.js"></script>
<link href="http://cdn.alloyui.com/3.0.0/aui-css/css/bootstrap.min.css" rel="stylesheet"></link>
 -->
<%
long profileId = ParamUtil.getLong(renderRequest, "profileId");
Profile profile = ProfileLocalServiceUtil.getProfile(profileId);
User usr = UserLocalServiceUtil.getUser(profile.getUserId());
PortletURL confirmationURL = renderResponse.createRenderURL();
confirmationURL.setParameter("jspPage", "/html/appointment/confirmation.jsp");
%>
<h3>Dr.<%= usr.getFullName() %></h3>

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

<portlet:actionURL name="makeAppointment" var="makeAppointmentURL">
	<portlet:param name="doctorId" value="<%=String.valueOf(usr.getUserId())%>" />
	<portlet:param name="patientId" value="<%=String.valueOf(user.getUserId())%>" />
	<portlet:param name="redirectUrl" value="<%=confirmationURL.toString()%>" />
</portlet:actionURL>
<aui:form action="<%=makeAppointmentURL%>">
	<p>
		<aui:input name="appointmentDate" required="true" inlineLabel="true" disabled="true" value="" />
	</p>
	<aui:input name="test" type="hidden"></aui:input>
	<aui:select name="appointmentTime" required="true" inlineLabel="true"
		helpMessage="Please select time slot">
	</aui:select>
	<aui:button type="submit"></aui:button>
</aui:form>


<script>
var dateToday = new Date();
	$(function() {
					$( "#<portlet:namespace/>appointmentDate" ).datepicker({
						showOn: "button",
						 buttonText: 'Show Date',
		               	 buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
		                 buttonImageOnly: true,
		              	 dateFormat:"dd-mm-yy",
						 minDate: +1,
						 maxDate:+90,
						 beforeShowDay: $.datepicker.noWeekends,
						 onSelect: function(selectedDate) {
						 var child = document.getElementById("<portlet:namespace/>appointmentTime");
    					 removeOptions(child);
						 var flag = document.getElementById("<portlet:namespace/>test");
						 flag.value = selectedDate;   
						 var timeSlots = ["", "12.00 PM", "12.30 PM", "1.00 PM", "1.30 PM","2.00 PM","2.30 PM","3.00 PM","3.30 PM","4.00 PM","4.30 PM","5.00 PM","5.30 PM"];

						Liferay.Service(
							  '/helloDoctor-portlet.appointment/get-days-time-slots',
							  {
							    doctorId:'<%= String.valueOf(usr.getUserId()) %>' ,
							    patientId:'<%= String.valueOf(user.getUserId()) %>' ,
							    date: selectedDate
							  },
							  function(data) {
								alert(data.length);
								 // child.options[0] = new Option("--Select time--", 0);
						  				for (var i=0; i<(timeSlots.length); i++) {
						  					//var location = data[i];
						  					//alert(location.appointmentTime)
						  					//if(location.appointmentTime=(i+1))
						  				child.options[i+1] = new Option(timeSlots[i+1], i+1);
						  				}  
							// Below code will remove the time slots taken		  
								  if(data.length!=0){
									  for(var i=0;i< data.length ; i++){
										  var location = data[i];
										  child.removeChild( child.options[location.appointmentTime] );  
									  }
								  }
							  });
						    }
					});
				});
	function removeOptions(obj) {
		if (obj == null) return;
		if (obj.options == null) return;
		obj.options.length = 0;	
	}
</script>
	